<template>
    <d2-container>
        <el-form :inline="true" :model="dataSearch" ref="dataSearch">
            <el-form-item label="考勤组名称" prop="name">
                <el-input v-model="dataSearch.name" placeholder="请输入考勤组名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="formSubmit">
                    <d2-icon name="search"/>
                    查询
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="formReset">
                    <d2-icon name="refresh"/>
                    重置
                </el-button>
            </el-form-item>
            <a href="#/work-group-create">
                <el-button type="primary" style="float:right" icon="el-icon-plus">新增考勤组</el-button>
            </a>
        </el-form>
        <el-table :data="dataList" border style="width: 100%">
            <el-table-column prop="name" label="考勤组名称"></el-table-column>
            <!-- <el-table-column prop="staff" label="包含员工"></el-table-column> -->
            <!-- <el-table-column prop="outStaff" label="排除员工"></el-table-column> -->
            <el-table-column prop="department" label="包含部门"></el-table-column>
            <el-table-column label="周一">
                <template slot-scope="scope">
                    <!-- {{scope.row}} -->
                    <block v-if='scope.row.hours.length > 0'>
                    <div v-for='item in scope.row.hours[1].hours'>
                        {{item[0]}} - {{item[1]}}
                    </div>
                    <div v-if='scope.row.hours[1].hours.length == 0'>无</div>
                </block>
                </template>
                    
            </el-table-column>
             <el-table-column prop="recurrenceDate" label="周二">
                 <template slot-scope="scope">
                    <!-- {{scope.row}} -->
                    <block v-if='scope.row.hours.length > 0'>
                    <div v-for='item in scope.row.hours[2].hours'>
                        {{item[0]}} - {{item[1]}}
                    </div>
                    <div v-if='scope.row.hours[2].hours.length == 0'>无</div>
                </block>
                </template>
             </el-table-column>
              <el-table-column prop="recurrenceDate" label="周三">
                  <template slot-scope="scope">
                    <!-- {{scope.row}} -->
                    <block v-if='scope.row.hours.length > 0'>
                    <div v-for='item in scope.row.hours[3].hours'>
                        {{item[0]}} - {{item[1]}}
                    </div>
                    <div v-if='scope.row.hours[3].hours.length == 0'>无</div>
                </block>
                </template>
              </el-table-column>
               <el-table-column prop="recurrenceDate" label="周四">
                   <template slot-scope="scope">
                    <!-- {{scope.row}} -->
                    <block v-if='scope.row.hours.length > 0'>
                    <div v-for='item in scope.row.hours[4].hours'>
                        {{item[0]}} - {{item[1]}}
                    </div>
                    <div v-if='scope.row.hours[4].hours.length == 0'>无</div>
                </block>
                </template>
               </el-table-column>
                <el-table-column prop="recurrenceDate" label="周五">
                    <template slot-scope="scope">
                    <!-- {{scope.row}} -->
                    <block v-if='scope.row.hours.length > 0'>
                    <div v-for='item in scope.row.hours[5].hours'>
                        {{item[0]}} - {{item[1]}}
                    </div>
                    <div v-if='scope.row.hours[5].hours.length == 0'>无</div>
                </block>
                </template>
                </el-table-column>
                 <el-table-column prop="recurrenceDate" label="周六">
                     <template slot-scope="scope">
                    <!-- {{scope.row}} -->
                    <block v-if='scope.row.hours.length > 0'>
                    <div v-for='item in scope.row.hours[6].hours'>
                        {{item[0]}} - {{item[1]}}
                    </div>
                    <div v-if='scope.row.hours[6].hours.length == 0'>无</div>
                </block>
                </template>
                 </el-table-column>
                  <el-table-column prop="recurrenceDate" label="周日">
                      <template slot-scope="scope">
                    <!-- {{scope.row}} -->
                    <block v-if='scope.row.hours.length > 0'>
                    <div v-for='item in scope.row.hours[0].hours'>
                        {{item[0]}} - {{item[1]}}
                    </div>
                    <div v-if='scope.row.hours[0].hours.length == 0'>无</div>
                </block>
                </template>
                  </el-table-column>
            <!-- <el-table-column prop="startTime" label="开始打卡时间">
                <template slot-scope="scope">
                    <div style="white-space: pre-line;">{{scope.row.startTime}} </div>
                </template>

            </el-table-column>
            <el-table-column prop="endTime" label="结束打卡时间">
                <template slot-scope="scope">
                    <div style="white-space: pre-line;">{{scope.row.endTime}} </div>
                </template>
            </el-table-column> -->
            <!-- <el-table-column prop="longitude" label="经度范围"></el-table-column> -->
            <!-- <el-table-column prop="latitude" label="纬度范围"></el-table-column> -->
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="total,sizes,prev, pager, next,jumper"
                :page-size="pageSize"
                :current-page="currentPage"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handlerSizeChange"
                @next-click="handleNextPage"
                @prev-click="handlePrevClick"
        ></el-pagination>
    </d2-container>
</template>

<script>
    import request from "@/plugin/axios";
        import {mapState} from "vuex";

    export default {
        data() {
            return {
                dataList: [],
                total: 0,
                pageSize: 10,
                currentPage: 1,
                classroom: [],
                dataSearch: {}
            };
        },
         computed: {
            ...mapState('d2admin/user', ['info']),
        },
        methods: {
            formSubmit() {
                this.dataSearch.page = this.currentPage;
                this.dataSearch.pageSize = this.pageSize;
                
                this.getDataList(this.dataSearch);
            },
            formReset() {
                this.$refs.dataSearch.resetFields();
            },
            handleClick(e) {
                this.$router.push({path: "/classroom-detail?id=" + e._id});
            },

            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
                this.dataSearch.page = this.currentPage;
                this.dataSearch.pageSize = this.pageSize;
                this.getDataList(this.dataSearch);
            },
            handlerSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.dataSearch.page = this.currentPage;
                this.dataSearch.pageSize = this.pageSize;
                this.getDataList(this.dataSearch);
            },
            handleNextPage() {
                this.currentPage = this.currentPage + 1;
                this.dataSearch.page = this.currentPage;
                this.dataSearch.pageSize = this.pageSize;
                this.getDataList(this.dataSearch);
            },
            handlePrevClick() {
                this.currentPage = this.currentPage - 1;
                this.dataSearch.page = this.currentPage;
                this.dataSearch.pageSize = this.pageSize;
                this.getDataList(this.dataSearch);
            },
            handleClick(e){
                this.$router.push({path: "/work-group-detail?id=" + e._id});
            },
            deleteClick(e) {
                this.$confirm("此操作将删除该考勤组, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        request({
                            url: "/workRecordGroup/deleteWorkRecordGroupOne",
                            method: "post",
                            data: {_id: e._id}
                        }).then(res => {
                            if (res.code == 200) {
                                this.$message({
                                    message: "删除成功"
                                });
                                this.getDataList(this.dataSearch);
                            }
                        });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        });
                    });
            },

            getDataList(data) {
                var datax = data
                datax.school = this.school
                request({
                    url: "/workRecordGroup/getWorkRecordGroupList",
                    method: "post",
                    data: datax
                }).then(res => {
                    this.dataList = [];
                    this.dataList = res.data.workRecordGroup;
                    this.dataList.forEach((item, index) => {

                        this.dataList[index].staff = item.staff.map(value => value.name).join(",");
                        this.dataList[index].outStaff = item.outStaff.map(value => value.name).join(",");
                        this.dataList[index].department = item.department.map(value => value.name).join("\n");
                        // item.recurrence = item.recurrence.sort(function(a,b){return a-b})
                        // item.recurrence = item.recurrence.map(function(e){
                        //     if (e == 0){
                        //         return '周日'
                        //     }else if (e == 1){
                        //         return '周一'
                        //     }else if (e == 2){
                        //         return '周二'
                        //     }else if (e == 3){
                        //         return '周三'
                        //     }else if (e == 4){
                        //         return '周四'
                        //     }else if (e == 5){
                        //         return '周五'
                        //     }else if (e == 6){
                        //         return '周六'
                        //     }

                        // })
                        // this.dataList[index].recurrenceDate = item.recurrence.join(', ')
                        // this.dataList[index].startTime = item.startTime.join("\n");
                        // this.dataList[index].endTime = item.endTime.join("\n");
                        console.log(item.hours,'sdss')
                        if ((item.hours == undefined)){
                            item.hours = [
                                {day:0,hours:[]},
                                {day:1,hours:[]},
                                {day:2,hours:[]},
                                {day:3,hours:[]},
                                {day:4,hours:[]},
                                {day:5,hours:[]},
                                {day:6,hours:[]},
                            ]
                        }
                        else{
                            if ((item.hours.length == 0)){
                            item.hours = [
                                {day:0,hours:[]},
                                {day:1,hours:[]},
                                {day:2,hours:[]},
                                {day:3,hours:[]},
                                {day:4,hours:[]},
                                {day:5,hours:[]},
                                {day:6,hours:[]},
                            ]
                        }
                        }
                        



                    });
                    this.total = res.data.total;
                    this.currentPage = res.data.currentPage;
                });
            },
            load(){
                 this.dataSearch.page = this.currentPage;
            this.dataSearch.pageSize = this.pageSize;
            this.school = this.info.school[0]._id
            this.getDataList(this.dataSearch);
            }
        },
        beforeRouteEnter(to, from, next) {
            if (to.meta.refresh == 'a'){
                to.meta.refresh = undefined
                next(v=>{
                v.load()
                })
            }
            else{
                next()
            }


        },
        created() {
           this.load()
        }
    };
</script>
